<template>
  <div class="detail">
    <detail-nav-bar @tabClick="tabClick" ref="nav"></detail-nav-bar>
    <scroll class="wrapper" ref="scroll" @scroll="scroll" :probeType2="3">
        <!-- {{ this.$store.state.cartList }} -->
        <detail-swiper :topImages="topImages"></detail-swiper>
        <detail-base-info :goods="goods"></detail-base-info>
        <detail-shop-info :shop="shop"></detail-shop-info>
        <detail-image-info :detailInfo="detailInfo" @imageLoad="imageLoad"></detail-image-info>
        <detail-param-info :params="params" ref="param"></detail-param-info>
        <detail-comment-info :commentInfo="commentInfo" ref="comment"></detail-comment-info>
        <goods-list :goods="recommend" @imgLoad="imgLoad" ref="goods"></goods-list>
    </scroll>
    <back-top @click.native="backTop" v-show="isShow"></back-top>
    <detail-bottom-bar @addToCar="addToCar"></detail-bottom-bar>
    <!-- <toast :message="message" :isShow="show"></toast> -->
  </div>
</template>

<script>
import DetailNavBar from './childDetail/DetailNavBar.vue'
import DetailSwiper from './childDetail/DetailSwiper.vue'
import DetailBaseInfo from './childDetail/DetailBaseInfo.vue'
import DetailShopInfo from './childDetail/DetailShopInfo.vue'
import DetailImageInfo from './childDetail/DetailImageInfo'
import DetailParamInfo from './childDetail/DetailParamInfo.vue'
import DetailCommentInfo from './childDetail/DetailCommentInfo.vue'
import DetailBottomBar from './childDetail/DetailBottomBar.vue'

import Scroll from 'components/common/scroll/Scroll'
import GoodsList from 'components/content/goodsList/GoodsList'
// import Toast from 'components/common/toast/Toast'
// import BackTop from 'components/content/backTop/BackTop' // 混入

import {getDetail, Goods, Shop, Param, getRecommend} from 'network/detail'

import { debounce } from 'common/utils'

import { itemListerMixin } from 'common/mixins'

import { mapActions } from 'vuex'










export default {
    components: {   
        DetailNavBar,
        DetailSwiper,
        DetailBaseInfo,
        DetailShopInfo ,
        Scroll,
        DetailImageInfo,
        DetailParamInfo,
        DetailCommentInfo,
        GoodsList,
        DetailBottomBar,
        // Toast,
        // BackTop,
    },
    name: 'Detail',
    data() {
        return{
            topImages: [],
            goods: {},
            shop: {},
            detailInfo: {},
            refresh: null,
            params: {},
            commentInfo: {},
            recommend: [],
            // isShow: null, 混入
            offsetTop: [],
            throttle: null,
            index: 0,
            iid: null,
            message: '',
            show: false,
        }
    },
    mixins: [itemListerMixin],
    created() {
        this.iid = this.$route.params.iid
        getDetail(this.iid).then(res => {
            // console.log(res.result);
            const data = res.result
            // 1. 轮播图
            this.topImages.push(...data.itemInfo.topImages)

            // 2. 基本信息
            this.goods = new Goods(data.itemInfo, data.columns, data.shopInfo.services)

            // 3. 店铺信息
            this.shop = new Shop(data.shopInfo)

            // 4. 详情图片
            this.detailInfo = data.detailInfo

            // 5. 参数相关数据

            this.params = new Param(data.itemParams.info, data.itemParams.rule)

            // 6. 评论数据
            if (data.rate.cRate !== 0) {
                this.commentInfo = data.rate.list[0]
            }

        })

         // 推荐数据
         getRecommend().then(res => {
            // console.log(res);
            this.recommend = res.data.list
         })
        
    },
    mounted() {
        this.refresh = debounce( this.$refs.scroll.refresh2, 100)
        // 
        // this.offsetTop.push(0)
        // this.offsetTop.push(-this.$refs.param.$el.offsetTop)
        // this.offsetTop.push(-this.$refs.comment.$el.offsetTop)
        // this.offsetTop.push(-this.$refs.goods.$el.offsetTop)
        // console.log(this.offsetTop);
        this.throttle = debounce(() => {
            // console.log(111111111111111);
                this.offsetTop = []
                this.offsetTop.push(0)
            this.offsetTop.push(this.$refs.param.$el.offsetTop)
            this.offsetTop.push(this.$refs.comment.$el.offsetTop)
            this.offsetTop.push(this.$refs.goods.$el.offsetTop)
            this.offsetTop.push(Number.MAX_VALUE)
        }, 100)
    },
    methods: {
        imageLoad() {
            // this.$refs.scroll.refresh2()
            this.refresh()

            // 在图片加载完，再获取offsetTop
            this.throttle()
        // console.log(this.offsetTop);
         
        },
        // backTop() {
        //     this.$refs.scroll.scrollTo2(0, 0) // 混入
        // },
        scroll(position) {
            // console.log(position);
            this.isShow = - position.y > 1000

            // // 2. 最直接方法
            // if (-position.y >= this.offsetTop[0] && -position.y < this.offsetTop[1]) {
            //     this.$refs.nav.currentIndex = 0
            // } else if (-position.y >= this.offsetTop[1] && -position.y < this.offsetTop[2]) {
            //     this.$refs.nav.currentIndex = 1
            // } else if (-position.y >= this.offsetTop[2] && -position.y < this.offsetTop[3]) {
            //     this.$refs.nav.currentIndex = 2
            // } else  if (-position.y >= this.offsetTop[3]) {
            //     this.$refs.nav.currentIndex = 3
            // }

           

            const length = this.offsetTop.length
            const positiony = -position.y
            // // 3. 复杂判断
            // for (let i = 0; i < length - 1; i++) {
            //     // 必须写大于等于，不然等于了，选中会不，找了好久的bug
            //     // if (this.index !== i && ((i < length - 1 && positiony >= this.offsetTop[i] && positiony < this.offsetTop[i + 1])
            //     // || (i === length - 1 && positiony >= this.offsetTop[i]))) {
            //     //     console.log(i);
            //     //     this.index = i
            //     //     this.$refs.nav.currentIndex = this.index
            //     // }

                
            // }

            // 4. 简化判断
            for (let i = 0; i < length - 1; i++) {

                if (this.index !== i && 
                (positiony >= this.offsetTop[i] && positiony < this.offsetTop[i + 1])) {
                    this.index = i
                    this.$refs.nav.currentIndex = this.index
                }
            }

        
        },
        imgLoad() {
            this.refresh()
            // console.log(999999999999);
            
        },
        tabClick(index) {
            this.$refs.scroll.scrollTo2(0, -this.offsetTop[index])
            // console.log(this.offsetTop[index]);
            // console.log(this.offsetTop);
        },

        addToCar() {
            // console.log(666666666);
            const res = {}
            res.image = this.topImages[0]
            res.title = this.goods.title
            res.desc = this.goods.desc
            res.price = this.goods.oldPrice
            res.iid = this.iid

            // // 2.
            // this.$store.dispatch('addCart', res).then(res => {
            //     console.log(res);
            // })
            // 映射actions方法
            this.addCart(res).then(res => {
                // console.log(res);
                // this.message = res
                // this.show = true

                // setTimeout(() => {
                //     this.show = false
                // }, 2000)
                this.$toast.show(res)
            })
        },
        ...mapActions(['addCart'])
    }
}
</script>

<style scoped>
    .detail{
        height: 100vh;
        position: relative;
        background: #fff;
        z-index: 1;
    }
    .wrapper{
        height: calc(100% - 44px - 49px);
        overflow: hidden;
    }
</style>